<template>
  <el-container>
    <div width="100%" style="width: 100%">
      <el-tabs type="border-card"  style="overflow:auto" >
        <el-tab-pane label="订单列表">
          <ul style="list-style: none; margin-bottom: 1rem;" >
            <li v-for="item in 8" :key="item" style="margin-bottom: 1rem;">
              <div class="tableBor">
                <!-- 第一行：编号、时间 -->
                <div class="tableTop">
                  <span>订单编号：</span>
                </div>
                <!-- 第二行：主体信息 -->
                <div style="padding: 0.5rem">
                  <span sylte="margin-right: 1rem;">
                    <el-avatar
                      shape="square"
                      size="size"
                      :src="squareUrl"
                    ></el-avatar>
                  </span>
                  <div
                    style="float: right; padding-top: 0.5rem; padding-right: 80rem;"
                  >
                    <span style="margin: 0.5rem; margin-right: 10rem">
                      商品名称
                    </span>
                    <span>
                      商品价格 / 商品数量
                    </span>
                  </div>
                </div>
                <!-- 第三行：地址、收件人、联系电话 -->
                <div style="padding: 0.5rem;">
                  <div>
                    发货地址：‘省市区、街道、详细地址、收件人、联系电话’
                  </div>
                  <div style="color: #999; font-size: 10px;">
                    发货方式：
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-container>
</template>

<script>
export default {

  data() {
    return {
      value: "",
      input: "",
      isOperation: false,
      // 表格数据源绑定
      tableData: [],
      squareUrl:
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
    };
  },
};
</script>

<style scoped>
* {
  font-size: 14px;
}
.tableBor {
  border-radius: 0.5rem;
  border: solid 1px #e0e0e0;
}
.tableTop {
  background-color: #e6e6e691;
  width: 100%;
  padding: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
</style>
